<template>
  <Table
    :tableData="tableData"
    :heads="heads"
    :headMap="headMap"
    :isExportTable="true"
  >
    <el-table-column label="操作" width="80" align="center">
      <template #default="scope">
        <div class="operation">
          <span
            v-if="!ismoving[scope.$index]"
            @click="ismoving[scope.$index] = !ismoving[scope.$index]"
            >移动</span
          >

          <span v-else class="move">
            <el-icon class="moveup-text" @click="handleMoveUp(scope.$index)">
              <ArrowUpBold />
            </el-icon>

            <el-icon
              class="movedown-text"
              @click="handleMoveDown(scope.$index)"
            >
              <ArrowDownBold />
            </el-icon>
          </span>
        </div>
      </template>
    </el-table-column>
  </Table>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";

import Table from "@/components/common/Table.vue";

type IsMoving = boolean | undefined;

const ismoving: IsMoving[] = reactive([]);

const props = defineProps(["tableData", "heads", "headMap"]);
const emits = defineEmits(["moveUp", "moveDown"]);

const handleMoveUp = (index: number) => {
  if (index !== 0) {
    emits("moveUp", index);
  }

  ismoving[index] = false;
};

const handleMoveDown = (index: number) => {
  if (index !== props.tableData.length - 1) {
    emits("moveDown", index);
  }

  ismoving[index] = false;
};
</script>

<style lang="less" scoped>
.mytable {
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .operation {
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      color: #3f85ed;
      cursor: pointer;
    }

    .moveup-text,
    .movedown-text {
      color: #666;
    }

    .delete-text {
      margin: 0 20px;
    }

    .move {
      display: inline-flex;
      flex-direction: column;
      font-size: 16px;
      margin-left: 8px;
    }
  }
}

:deep(.el-dialog_body) {
  height: 70vh;
  overflow: auto;
}
</style>
